<!-- 我的订单 -->
<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" class="box" v-if="isshow">
		<!-- #ifdef APP-PLUS -->
		<view class="header" slot="top">
			<view @click="back"><u-icon name="arrow-left" size="40rpx" color="black"></u-icon></view>
			<text>开具发票</text>
			<view class="right" @click="invoiceHistory">开票历史</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="flex_end headers_r"><view class="right" @click="invoiceHistory">开票历史</view></view>
		<!-- #endif -->
		<view class="tabs">
			<Item ref="item" :dataList="dataList" :isOpen="isOpen" :current="current" :showTime="false" @changeItem="changeItem" /></view>
		<view class="all">
			<u-checkbox-group v-model="chooseAll" placement="column" @change="groupChange" size="36rpx">
				<view class="left">
					<u-checkbox label="全选" labelSize="14px" name="1" shape="circle" :checked="isChooseAll" />
					<view class="text">
						共选择
						<text>{{ choosed }}</text>
						个订单
					</view>
					<view class="money">
						<text>￥</text>
						<view>{{ money }}</view>
					</view>
				</view>
			</u-checkbox-group>
			<view class="btn" @click="ToInvoice">去开票</view>
		</view>
	</z-paging>
</template>

<script>
import { myOrderList } from '@/apis/apis.js';
import Item from '../../modules/order_item.vue';
export default {
	components: {
		Item
	},
	data() {
		return {
			chooseAll: [],
			current: 0,
			dataList: [], //增加选择以后的数据(实际使用的数据)
			voidList: [], //超过3个月的数据
			isChooseAll: false, //子组件是否主动全选
			choosed: 0, //已选中的条数
			isOpen: true, //是否开了发票
			invoiceFlag: 0, //	开票状态(0：未开票,2:已开票)
			orderIds: [], //	订单ids多个逗号隔开,
			isshow: false
		};
	},
	mounted() {},
	onShow() {
		this.isshow = true;
	},
	onHide() {
		this.isshow = false;
	},
	methods: {
		queryList(pageNo, pageSize) {
			myOrderList({
				invoiceFlag: this.current,
				orderIds: null,
				pageNum: pageNo,
				pageSize: pageSize
			}).then(res => {
				console.log(res);
				this.dataList = res.data;
				// this.$refs.paging.complete(this.dataList);
				//正常开票
				this.dataList = res.data.map(item => {
					if (item.invoiceAuth == 1) {
						return item;
					}
				});
				console.log(this.dataList);
				this.$refs.paging.complete(res.data);
			});
		},
		back() {
			// uni.navigateBack();
			uni.navigateTo({
				url: '../order'
			});
		},
		//全选切换
		groupChange(e) {
			if (e.length > 0) {
				this.isChooseAll = true;
			} else {
				this.isChooseAll = false;
			}
			if (this.isChooseAll) {
				this.$refs.item.chooseResult = this.dataList.map(item => {
					return item.id;
				});
				this.choosed = this.$refs.item.chooseResult.length;
			} else {
				this.$refs.item.chooseResult = [];
				this.choosed = 0;
			}
		},
		//列表选择判断是否全选(单选)
		changeItem(e) {
			if (e.length === this.dataList.length) {
				this.isChooseAll = true;
			} else {
				this.isChooseAll = false;
			}
			this.choosed = e.length;
		},
		//去开票
		ToInvoice() {
			if (this.$refs.item.chooseResult.length > 0) {
				let id = JSON.stringify(this.$refs.item.chooseResult);
				uni.navigateTo({
					url: `./invoice?ids=${id}&money=${this.money}`
				});
			} else {
				return;
			}
		},
		//开票历史
		invoiceHistory() {
			uni.navigateTo({
				url: './invoiceHistory'
			});
		}
	},
	computed: {
		money() {
			let arr = 0;
			this.dataList.forEach(item => {
				item.payMoney = Number(item.payMoney);
				for (let item1 of this.$refs.item.chooseResult) {
					if (item.id == item1) {
						arr += item.payMoney;
					}
				}
			});
			// console.log(arr);
			return arr;
		}
	}
};
</script>

<style lang="scss" scoped>
.gray,
.box {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.void {
	font-size: 30rpx;
	font-family: Source Han Sans CN;
	font-weight: 500;
	color: #303030;
	margin-top: 50rpx;
	padding: 0 30rpx;

	.title {
		margin-bottom: 12rpx;
	}

	text {
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #9b9b9b;
	}
}

.header {
	position: fixed;
	background-color: #fff;
	box-sizing: border-box;
	z-index: 999;
	top: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 76rpx 30rpx 20rpx 30rpx;

	& > text {
		width: 33%;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	& > view {
		width: 33%;
	}
}
.headers_r {
	padding: 10rpx 30rpx;
	position: fixed;
	z-index: 999;
	width: 100vw;
	box-sizing: border-box;
}
.right {
	width: 160rpx;
	height: 56rpx;
	background: #194FC9;
	border-radius: 28rpx;
	font-size: 28rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	line-height: 56rpx;
}
.tabs {
	/* #ifdef APP-PLUS */
	margin-top: 150rpx;
	/*  #endif  */
	/* #ifdef MP-WEIXIN */
	margin-top: 76rpx;
	/*  #endif  */
}

.imgs {
	margin-top: 68rpx;
	display: flex;
	align-items: center;
	padding-left: 74rpx;

	image {
		width: 220rpx;
		height: 148rpx;
		margin-right: 60rpx;
	}
}

.all {
	position: fixed;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: 110rpx;
	background: #ffffff;
	padding: 18rpx 48rpx 18rpx 36rpx;
	justify-content: space-between;
	box-shadow: 0px 0px 20rpx 20rpx rgba(80, 80, 80, 0.06);

	.left {
		display: flex;
		align-items: center;

		.text {
			margin-left: 22rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #393939;
		}
	}

	.btn {
		width: 220rpx;
		height: 76rpx;
		background: #194FC9;
		border-radius: 38rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		text-align: center;
		line-height: 76rpx;
	}
}

.money {
	width: 150rpx;
	// border: 1px solid red;
	padding-left: 23rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffa025;
	display: flex;
	align-items: baseline;

	& > text {
		font-size: 22rpx;
	}
}
</style>
